<!-- 功能：功能描述 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2024年01月16日 16:16:46 -->
<template>
  <div class="icon-div">
    <div class="search">
      <a-input v-model:value="name" placeholder="快捷查询" allowClear @change="filterIcons" />
    </div>
    <div class="icon-list">
      <div class="icon" v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
        <component :is="item" />
        <span style="font-size: 12px">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import IconArray from './icon.json'
import { defineComponent, reactive, toRefs } from 'vue'
import {} from 'vue-router'
import {} from 'vuex'

export default defineComponent({
  name: 'IconSelect',
  props: {},
  emits: ['selected'],
  setup(props, context) {
    const data = reactive({
      name: '',
      iconList: IconArray
    }) //里面写所有的响应式数据，像vue2中的data一样

    const filterIcons = () => {
      data.iconList = IconArray
      // -- 过滤图标
      if (data.name) {
        data.iconList = data.iconList.filter(item => item.includes(data.name))
      }
    }

    const selectedIcon = name => {
      context.emit('selected', name)
      // -- 选择图标回调函数
    }

    const initIcons = () => {
      // -- 初始化图标
      data.iconList = IconArray
    }
    return {
      ...toRefs(data),
      filterIcons,
      selectedIcon
    }
  },
  components: {}
})
</script>

<style scoped>
.icon-div {
  width: 560px
}
.icon-list {
  height: 200px;
  overflow-y: auto;
}
.icon {
  display: inline-block;
  height: 31px;
  line-height: 30px;
  border-radius: 5px;
  width: 180px;
  margin-top: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.icon:hover {
  color: #409eff;
}
</style>